<template>
    <a class="list-item" v-bind:href="to">
        <div class="list-item-left">
            <slot name="left-icon"></slot>
            <div class="item-content">{{ title }}</div>
        </div>
        <template v-if="typeof(isLink) === 'string'">
            <span class="pr-iconfont icon-more"></span>
        </template>
    </a>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        props: ['title', 'isLink', 'to'],
        created : function() {
        }
    }
</script>

<style lang="scss">
    .list-item {
        color: black; 
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        line-height: 24px;
        background: white;
        padding: 10px;
    }
    .list-item-left {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
    .list-item .pr-iconfont, .ss {
        align-self: flex-end;
    }
    .item-l-img {
        margin-right: 10px
    }
</style>